import React, { useState } from 'react';
import { Card, Col, Row, Button, Space, Modal, Image } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import {Cet_4} from './Cet_4'
import Cet_6 from './Cet_6';
import c4 from './img/c4.jpg'
import c6 from './img/c6.jpg'
import cd4 from './img/cd4.png'
import cd6 from './img/cd6.png'
import zifu from './img/zifu.webp'

const { Meta } = Card;
const style = { padding: '2% 2%', height: '10px' };
export default function Sign(){
    //modal属性
    const [isModalVisible4, setIsModalVisible4] = useState(false);
    const showModal4 = () => {
        setIsModalVisible4(true);
    };
    const handleOk4 = () => {
        setIsModalVisible4(false);
    };
    const handleCancel4 = () => {
        setIsModalVisible4(false);
    };

    const [isModalVisible6, setIsModalVisible6] = useState(false);
    const showModal6 = () => {
        setIsModalVisible6(true);
    };
    const handleOk6 = () => {
        setIsModalVisible6(false);
    };
    const handleCancel6 = () => {
        setIsModalVisible6(false);
    };

    const [isModal4, setIsModal4] = useState(false);
    const show4 = () => {
        setIsModal4(true);
    };
    const Ok4 = () => {
        setIsModal4(false);
    };
    const Cancel4 = () => {
        setIsModal4(false);
    };

    const [isModal6, setIsModal6] = useState(false);
    const show6 = () => {
        setIsModal6(true);
    }; 
    const Ok6 = () => {
        setIsModal6(false);
    };
    const Cancel6 = () => {
        setIsModal6(false);
    };
    
    return (
        <Row gutter={16}>
            <Col span={3}></Col>
            <Col span={8} style={style}>
                <Card
                    // hoverable
                    bordered
                    actions={[
                        <Button type="primary" onClick={showModal4}>详情</Button>,
                        <Cet_4></Cet_4>,
                        <Button type="primary" onClick={show4}>缴费</Button>
                    ]}
                    cover={<img alt="example" src={c4} />}
                >
                    <Meta title="英语四级报名及流程" description="(1)英语四级考试9:10考试正式开始,开始做试题第一部分“写作”,务必用黑色字迹签字笔答题。
                   (2)英语四级考试9:35监考员发试题册，考生不得提前翻阅或改变试卷位置,否则按违规违纪处理,并报省教育考试院处理。
                   (3)英语四级考试9:40开始做试题的第二部分，英语四级写作部分考试结束;考生打开试题册，开始做试题的第二部分“快速阅读理解”。
                   (4)英语四级考试9:55收答题卡1，收卷期间考生不得答题,否则按违规违纪处理,并报省教育考试院处理。
                   (5)英语四级考试10:00听力考试正式开始，四级听力考试结束后,请立即摘下耳机,否则按违规违纪处理,并报省教育考试院处理;考生开始做试题的最后部分。"/>
                </Card>
            </Col>
            <Col span={2}></Col>
            <Col span={8} style={style}>
                <Card
                    // hoverable
                    bordered
                    cover={<img alt="example" src={c6} style={{ height: '370px' }} />}
                    actions={[
                        <Button type="primary" onClick={showModal6}>详情</Button>,
                        // <Button type="primary">报名</Button>,
                        <Cet_6></Cet_6>,
                        <Button type="primary" onClick={show6}>缴费</Button>
                        // <SettingOutlined key="setting"   onClick={showModal6}/>,
                        // <EditOutlined key="edit" />,
                        // <EllipsisOutlined key="ellipsis" />,
                    ]}
                >
                    <Meta title="英语六级报名及流程" description="(1)英语四级考试9:10考试正式开始,开始做试题第一部分“写作”,务必用黑色字迹签字笔答题。
                   (2)英语四级考试9:35监考员发试题册，考生不得提前翻阅或改变试卷位置,否则按违规违纪处理,并报省教育考试院处理。
                   (3)英语四级考试9:40开始做试题的第二部分，英语四级写作部分考试结束;考生打开试题册，开始做试题的第二部分“快速阅读理解”。
                   (4)英语四级考试9:55收答题卡1，收卷期间考生不得答题,否则按违规违纪处理,并报省教育考试院处理。
                   (5)英语四级考试10:00听力考试正式开始，四级听力考试结束后,请立即摘下耳机,否则按违规违纪处理,并报省教育考试院处理;考生开始做试题的最后部分。"/>


                    <Modal title="四级考试" visible={isModalVisible4} onOk={handleOk4} onCancel={handleCancel4}>
                        <Image src={cd4}></Image>
                    </Modal>
                    <Modal title="六级考试" visible={isModalVisible6} onOk={handleOk6} onCancel={handleCancel6}>
                        <Image src={cd6}></Image>
                    </Modal>
                    <Modal title="四级考试缴费(总计：25元)" visible={isModal4} onOk={Ok4} onCancel={Cancel4}>
                        <Image src={zifu}></Image>
                    </Modal>
                    <Modal title="六级考试缴费(总计：30元)" visible={isModal6} onOk={Ok6} onCancel={Cancel6}>
                        <Image src={zifu}></Image>
                    </Modal>
                </Card>
            </Col>
            <Col span={3}></Col>
        </Row>
    )
}
export { Sign }